<template>
    <div>

        <!-- <h1>题目管理</h1> -->
        <div style="display: flex;">
            <el-form-item label="题目id:" style="width: 15%">
                <el-input v-model="id" />
            </el-form-item>
            <el-form-item label="题目内容:" style="width: 13%; margin-left: 2%;">
                <el-input v-model="text" />
            </el-form-item>
            <el-form-item label="年级:" style="width: 13%; margin-left: 2%;">
                <el-select clearable v-model="formInline.level" placeholder="年级" size="large">
                    <el-option v-for="item in levelstore.list" :key="item.value" :label="item.name"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="学科: " style="width: 13%; margin-left: 2%;">
                <el-select clearable v-model="subject" placeholder="请选择" size="large">
                    <el-option v-for="item in arr" :key="item.id" :label="item.name + '(' + item.levelName + ')'"
                        :value="item.name + '(' + item.levelName + ')'" />
                </el-select>
            </el-form-item>
            <el-form-item label="题型: " style="width: 13%; margin-left: 2%;">
                <el-select clearable v-model="formInline.questionType" placeholder="请选择" size="large">
                    <el-option v-for="item in questionTypes" :key="item.value" :label="item.label"
                        :value="item.label" />
                </el-select>
            </el-form-item>
            <el-button type="primary" size="large" style="margin-left: 2%;"  @click="onSubmit">查询</el-button>
            <el-dropdown placement="bottom-start" style="margin-left: 2%;">
                <el-button type="primary" size="large"> 添加 </el-button>
                <template #dropdown>
                    <el-dropdown-menu style="display: flex;">
                        <el-dropdown-item v-for="item in questionTypes" :key="item.value">
                            <el-button  @click="handleAdd(item.value)" type="warning">{{item.label }}</el-button>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
        <div style="padding: 20px;">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="id" label="id" width="80" />
                <el-table-column label="学科" width="180">
                    <template #default="scope">
                        <span v-for="item in arr" :key="id">
                            <span v-if="scope.row.subjectId == item.id">{{ item.name }}({{ item.levelName }})</span>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="题型" width="80">
                    <template #default="scope">
                        <span v-for="item in questionTypes" :key="item.value">
                            <span v-if="scope.row.questionType == item.value">{{ item.label }}</span>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="shortTitle" label="题干" min-width="180" />
                <el-table-column prop="score" label="分数" width="80" />
                <el-table-column prop="difficult" label="难度" width="80" />
                <el-table-column prop="createTime" label="创建时间" min-width="180" />
                <el-table-column fixed="right" label="操作" width="240">
                    <template #default>
                        <el-button>预览</el-button>
                        <el-button @click="handleClick">编辑</el-button>
                        <el-button type="danger">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="bt">
            <el-pagination v-model:current-page="formInline.pageIndex" v-model:page-size="formInline.pageSize"
                :page-sizes="[5, 10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </div>

</template>

<script lang="ts" setup>
import { ref } from 'vue'
import axios from 'axios'
import { useLevelStore } from "@/stores/level"
import { QuestiontPage, type QuestionType } from "@/api/examques"
import { useRouter } from 'vue-router';
const router = useRouter()

//表单数据
const formInline = ref({
    level: "",
    subjectId: '',
    questionType: '',
    id: "",
    pageIndex: 1,
    pageSize: 10,
})
//总页数
const total = ref(0)
//pinia的数据
const levelstore = useLevelStore()
//表单数据
const tableData = ref<QuestionType[]>([])
console.log(tableData, 'tabledata');
//学科与年级数组
const arr = ref<any>([])
//获取列表接口
function getQuestionList() {
    QuestiontPage(formInline.value).then(res => {
        console.log(res, 'exampage');
        if (res.code === 1) {
            tableData.value = (res.response?.list as QuestionType[])
            total.value = (res.response?.total as number)
            // questionTypes.value = formInline.value.questionType
            console.log(questionTypes.value);
            
        }
    })
}
getQuestionList()

function getsubjectList() {
    axios({
        url: "/api/api/admin/education/subject/list",
        method: "post",
    }).then(res => {
        console.log(res.data, 'subject')
        if (res.data.message == "成功") {
            arr.value = res.data.response
            // const subject = `${res.data.response[0].name}(${res.data.response[0].levelName})`
            // console.log(subject);
        }
    })

}
getsubjectList()

//每页大小变化
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
    formInline.value.pageSize = val;
    getQuestionList()
}
//当前页修改
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    formInline.value.pageIndex = val;
    getQuestionList()
}
const id = ref('')
const questionTypes = ref<any>([
    {
        value: 1,
        label: "单选题"
    },
    {
        value: 2,
        label: "多选题"
    },
    {
        value: 3,
        label: "判断题"
    },
    {
        value: 4,
        label: "填空题"
    },
    {
        value: 5,
        label: "简答题"
    },
])
const text = ref('')
const page = ref('')
const pages = ref('')
const allList = 60
const grade = ref('')
const subject = ref('')
const handleClick = () => {
    console.log('click')
}
const onSubmit = () => {
    console.log('submit');
    console.log(formInline.value);
    getQuestionList()
}

function handleAdd(value: number) {
    if(value === 1) {
        router.push("/question/danxuan");
    } else if(value === 2) {
        router.push("/question/duoxuan");
    } else if(value === 3) {
        router.push("/question/panduan");
    } else if(value === 4) {
        router.push("/question/tiankong");
    } else if(value === 5) {
        router.push("/question/jianda");
    } else {
        console.warn("未知的题目类型");
        // router.push("/question/default");
    }
}
</script>

<style>
.bt {
    margin-left: 0;
    display: flex;
    justify-content: flex-start;
}

.btr {
    width: 90px;
    display: flex;
    justify-content: space-between;
}
</style>
